<template>
  <div class style="height: 100%; padding: 0px; width: 100%">
    <div :id="uniqueID" style="height: 100%; width: 100%"></div>
  </div>
</template>
<script>
import echarts1 from "echarts";
import uuidv1 from "uuid/v1";
import commonmixins from "@/mixins/bigScreen/commonmixins";
import websocketmixins from "../mixins/websocketmixins";

export default {
  components: {},
  name: "commonecharts",
  mixins: [commonmixins, websocketmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts1.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var echarts = echarts1

    var option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };

    if (_.has(this.componentDetail, 'options')) {
      eval(this.componentDetail.options)
    }

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
    if (this.componentDetail.datatype == 'websocket') {
      this.initWebSocket()
    }
  },

  methods: {
    //数据源
    loadData(res) {
      eval(this.componentDetail.loaddata)
    },
  },
};
</script>
<style lang='scss' scoped>
</style>